[#-- freemarker menu demo --]
<style type="text/css">

	/*临时
	body, table, input, textarea, select {
		font-family: 微软雅黑,Verdana,sans-serif,宋体;
	}*/

	/* root element for tabs  */
	ul.css-tabs {
	    margin:0 !important;
	    padding:0;
	    height:30px;
	    border-bottom:1px solid #666;
	}
	
	/* single tab */
	ul.css-tabs li {
	    float:left;
	    padding:0;
	    margin:0;
	    list-style-type:none;
	}
	
	/* link inside the tab. uses a background image */
	ul.css-tabs a {
	    float:left;
	    font-size:13px;
	    display:block;
	    padding:5px 30px;
	    text-decoration:none;
	    border:1px solid #666;
	    border-bottom:0px;
	    height:18px;
	    background-color:#efefef;
	    color:#777;
	    margin-right:2px;
	    position:relative;
	    top:1px;
	    outline:0;
	    -moz-border-radius:4px 4px 0 0;
	}
	
	ul.css-tabs a:hover {
	    background-color:#F7F7F7;
	    color:#333;
	}
	
	/* selected tab */
	ul.css-tabs a.current {
	    background-color:#ddd;
	    border-bottom:1px solid #ddd;
	    color:#000;
	    cursor:default;
	}
	
	
	/* tab pane */
	.css-panes div {
	    display:none;
	    border:1px solid #666;
	    border-width:0 1px 1px 1px;
	    min-height:150px;
	    padding:15px 20px;
	    background-color:#ddd;
	}

	/* alternate colors: skin2 */
	ul.skin2 a {
	    background-color:#89a;
	    color:#fff !important;
	}
	 
	/* mouseover state */
	ul.skin2 a:hover {
	    background-color:#678;
	}
	 
	/* active tab */
	ul.skin2 a.current {
	    background-color:#4F5C6A;
	    border-bottom:2px solid #4F5C6A;
	}
	 
	/* tab pane with background gradient */
	div.skin2 div {
	    min-height:200px;
	    color:#fff;
	    background:#234 url(../images/tabs/h300.png) repeat-x scroll 0 -50px;
	 
	    /* IE6 does not support PNG24 images natively */
	    _background:#4F5C6A;
	}

</style>

<script type="text/javascript">
	$(function() {
	    // setup ul.tabs to work as tabs for each div directly under div.panes
	    $("ul.css-tabs").tabs("div.css-panes > div");
	});
</script>

<div class="box">
	<!-- tabs -->
	<ul  id="toolbars"  class="css-tabs skin2">
	  <li><a href="#" id="t1" class="current">Tab 1</a></li>
	  <li><a href="#" id="t2" class="">Second tab</a></li>
	  <li><a href="#" id="t3" class="">A ultra long third tab</a></li>
	</ul>
	<!-- panes -->
	<div class="css-panes skin2">
		<div style="display: block;">
		    <p>
		      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
		      viverra, leo sit amet auctor fermentum, risus lorem posuere
		      tortor, in accumsan purus magna imperdiet sem.
		    </p>
		
		    <p>
		      Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
		      facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus
		      nibh metus, faucibus quis, semper ut, dignissim id, diam.
		    </p>
		</div>
	
		<div style="display: none;">
		    <p>
		      Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui,
		      molestie sed, tristique sit amet, blandit eu, turpis. Mauris
		      hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed
		      molestie dui quam vitae dui.
		    </p>
		    <p>
		      Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget
		      tortor. Maecenas id augue. Vivamus interdum nulla ac
		      dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus
		      eget dui volutpat molestie.
		    </p>
		</div>
	
		<div style="display: none;">
		    <p>
		      Maecenas at odio. Nunc laoreet lectus vel ante. Nullam
		      imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a,
		      nisl. Cum sociis natoque penatibus et magnis dis parturient
		      montes, nascetur ridiculus mus.
		    </p>
		
		    <p>
		      In sed dolor. Etiam eget quam ac nibh pharetra
		      adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
		      mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis
		      nisi. Vivamus at enim. Integer semper imperdiet
		      massa. Vestibulum nulla massa, pretium quis, porta id,
		      vestibulum vitae, velit.
		    </p>
		</div>
	</div>
</div>


<div id=${menuId}>
	<ul>
		<li>
			<a href="${menu.url}" title="${menu.description}" >${displayer.getMessage("${menu.title}")}</a>
		</li>
		[#if menu.subComponents != null]
			<ul>
				[#list menu.subComponents as item]
					<li>
						<a href="${item.url}" title="${item.description}" >${displayer.getMessage("${item.title}")}</a>
						${item.breadCrumb}
						${item.menuDepth}
						<ul>
							[#list item.subComponents as i]
								<li>
									<a href="${i.url}" title="${i.description}" >${displayer.getMessage("${i.title}")}</a>
									${i.breadCrumb}
									${i.menuDepth}
								</li>
							[/#list]
						</ul>
					</li>
				[/#list]
			</ul>
		[/#if]
	</ul>
</div>